<template>
    <div ref="container" @scroll="handleScroll">
        <!-- banner区域 -->
        <div class="banner">
            <el-carousel trigger="click" height="2.6042rem">
                <el-carousel-item v-for="item in bannerlist" :key="item.id">
                    <img :src="item.image" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="search-cont">
            <i></i>
            <input v-model="input" placeholder="请输入尺寸、编码、商品名称进行搜索" class="input-cont" />
            <img src="../../src//assets/images/icon_gb@2x.png" alt="" style="width: 24px;height: 24px;" @click="delval()" />
            <div class="btn" @click="handleSearch">
                搜索
            </div>
        </div>
        <div class="screen-cont">
            <Mypopover :searid="searbrand_Id" />
        </div>
        <div class="list">
            <ul class="text" v-if="user.qx.qx11 == 1">
                <li>搜索结果 : </li>
                <li> {{ total }}个效果图</li>
            </ul>
            <div>
                <ul class="goods">
                    <li v-for="item in goodslist" @click.stop="handleJump(item)">
                        <img :src="item.image" alt="">
                        <!-- <div @click.stop="sear(item)" style="padding: 10px; margin-bottom: 10rpx; font-size: 14px; text-align: center;color: 909090;box-sizing: border-box;">
                            同款搜索:{{ item.alias }}
                        </div> -->

                        <div style="">
                            <div
                                style="display: flex;justify-content: space-between;padding-top: 5px; font-size: 16px; font-weight: bolder; padding: 5px 10px 0;">
                                <div @click.stop="sear(item.brand_name)" v-if="user.qx.qx7 == 1">{{ item.brand_name }}</div>
                                <div @click.stop="sear(item.name)" v-if="user.qx.qx8 == 1">{{ item.name }}</div>
                            </div>

                            <div style="display: flex;justify-content: space-between;padding-top: 5px; font-size: 16px; font-weight: bolder;padding: 5px 10px 0;">
                                <div style="padding-top: 5px;font-weight: 600;font-size: .08rem;color: #909090;"
                                @click.stop="sear(item.alias)" v-if="user.qx.qx10 == 1">{{ item.alias_name }}</div>
                                <div style="padding-top: 5px;font-weight: 600;font-size: .08rem;color: #909090;"
                                @click.stop="sear(item.stock)" v-if="user.qx.qx9 == 1">{{ item.stock }}</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 分页 -->
                <!-- <MyPaging :total="total" v-model="page" :pagesize="8" v-if="total != 0" :currentpage="page" /> -->
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
import { GoodsList, BannerGet } from '../api/goods';
import MyPaging from '../components/my-paging.vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { debounce } from '../utils/debounce';
import { useUser } from '../store/user';
import { useGoods } from '../store/goods';
import Mypopover from './components/my-popover.vue';
const user = useUser()
const router = useRouter()
const input = ref('')

// 商品总数
const total = ref(0)
const page = ref(1)
const goods = useGoods()
let { spec, technology, category,thickness,type ,typea,typeb,typec,typed,typee} = goods
let { brand_id } = goods
let obj = ref({})
obj.value = { spec, technology, category, brand_id, thickness,type,typea,typeb,typec,typed,typee }
input.value = goods.search
page.value = goods.page
/* 获取商品列表 */
const goodslist = ref([])
if (user.userinfo) {
    let { token, } = user.userinfo
    GoodsList(page.value, { ...obj.value, keyword: input.value }, token).then(res => {
        let { lists, count } = res.data.data
        goodslist.value = lists
        total.value = count
    })
}else{
    GoodsList(page.value, { ...obj.value, keyword: input.value }, '').then(res => {
        let { lists, count } = res.data.data
        goodslist.value = lists
        total.value = count
    })
}
const containerRef = ref(null)
const handleScroll = () => {
     console.log("=====");
      const container = containerRef.value
      if (container.scrollTop + container.clientHeight >= container.scrollHeight-200) {
        loadMore()
        console.log('到底了');
      }
}

const delval = () => {
    input.value = ''
    goods.search = ''
    // handleInput()
    goodslist.value = []
    handleSearch()
}

const sear = (e) => {
    input.value = e
    handleSearch()
}

let searbrand_Id = ref('')
const searbrand = (id) => {
    console.log(id, "=====id");
    let arr = []
    arr.push(id)
    searbrand_Id.value = arr
    console.log(searbrand_Id.value);
}


watch(input, (n) => {
    goods.search = input.value
})

onMounted(() => {
    onReachBottom()

})



watch(
    // 监听的状态
    () => [goods.brand_id, goods.spec, goods.technology, goods.category, goods.page, goods.thickness,goods.type,goods.typea,goods.typeb,goods.typec,goods.typed,goods.typee], // 这里的 state.value 是你要监听的状态机数据

    // 回调函数，当状态发生变化时执行
    (newValue,oldval) => {
        // 在这里执行相应的操作
       
        if (user.userinfo) {
            let { token } = user.userinfo
            // console.log(newValue,oldval,"=========2");
            obj.value = { spec: newValue[1], technology: newValue[2], category: newValue[3], brand_id: newValue[0], thickness: newValue[5],type: newValue[6],typea: newValue[7],typeb: newValue[8],typec: newValue[9],typed: newValue[10],typee: newValue[11]}
           
            page.value = newValue[4]
            console.log(obj.value, "obj=====5");
            let sa = { ...obj.value, keyword: input.value }
            console.log(sa, "sa=====5");
            GoodsList(page.value, { ...obj.value, keyword: input.value }, token).then(res => {
                let { lists, count } = res.data.data
                goodslist.value = lists
                total.value = count
            })
        } else {
            ElMessage.error("请登录账号")
        }
    }
);

watch(page, (n) => {
    if (input.value != '') {
        obj.keyword = input.value
    }
    // goods.page = n
    if (user.userinfo) {
        let { token } = user.userinfo
        GoodsList(n, { ...obj.value, keyword: input.value }, token).then(res => {
            let { lists, count } = res.data.data
            goodslist.value.push(...lists)
            total.value = count
        })
    }
})
// 跳转商品详情页面

const handleJump = (info) => {
    let { id, name } = info
    router.push({
        path: '/goods-detail',
        query: {
            id,
            name
        }
    })
}


// 节流方法
const throttle = (func, delay) => {
    let timer = null;
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, arguments);
                timer = null
            }, delay)
        }
    }
}
// 触底函数
const onReachBottom = () => {
    // console.log("=========");
    window.addEventListener('scroll', throttle(onBottom, 200))
}
// 触底相应函数
const onBottom = () => {
    // console.log(document.documentElement);
    // 获取可视高度
    let clientHeight = document.documentElement.clientHeight;
    // 获取滚动高度
    let scrollTop = document.documentElement.scrollTop

    // 滚动条高度
    let scrollHeight = document.documentElement.scrollHeight
    console.log(clientHeight + scrollTop, scrollHeight);
    if (clientHeight + scrollTop >= scrollHeight - 2) {
        console.log('触底了')
        page.value = page.value + 1
    }
}



const handleSearch = debounce(() => {
    console.log(11);
    let { spec, technology, category,type,thickness } = goods
    let { brand_id } = goods
    obj.value = { spec, technology, category, thickness,brand_id,type }
    page.value = 1
    goods.page = 1
    goodslist.value = []
    if (user.userinfo) {
        let { token } = user.userinfo
        GoodsList(page.value, { ...obj.value, keyword: input.value }, token).then(res => {
            let { lists, count } = res.data.data
            goodslist.value = lists
            total.value = count
        })
    } else {
        ElMessage.error('请登陆账号')
    }
}, 1000)

// 输入框,但内容清空的时候恢复
const handleInput = debounce((e) => {
    let { spec, technology, category, brand_id ,type} = goods
    goods.search = input.value
    obj.value = { spec, technology, category, brand_id ,type}
    page.value = 1
    goods.page = page.value
    if (user.userinfo) {
        let { token } = user.userinfo
        GoodsList(page.value, { ...obj.value, keyword: input.value }, token).then(res => {
            let { lists, count } = res.data.data
            goodslist.value.push(...lists)
            total.value = count
        })
    }
}, 1000)





// 轮播图
const bannerlist = ref([])
BannerGet().then(res => {
    bannerlist.value = res.data.data
})



</script>

<style lang="scss" scoped>
.screen-cont {
    width: 7.8125rem;
    min-height: .5208rem;
    background: #FFFFFF;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.banner {
    height: 2.6042rem;

    img {
        height: 2.6042rem;
        width: 100%;
    }
}

.search-cont {
    width: 7.8125rem;
    height: .4167rem;
    background: #EEEEEE;
    border-radius: .2083rem;
    margin: .2396rem auto .1146rem;
    display: flex;
    padding: .0521rem .0521rem .0521rem .2083rem;
    align-items: center;

    .input-cont {
        border: 0;
        outline: none;
        flex: 1;
        font-size: .0938rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        background: #EEEEEE;
    }

    >.btn {
        width: .625rem;
        height: .3125rem;
        background: #3F7233;
        border-radius: .1563rem;
        font-size: .0833rem;
        font-weight: 300;
        color: #FFFFFF;
        text-align: center;
        line-height: .3125rem;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 1;
        }
    }

    >i {
        width: .1042rem;
        height: .1042rem;
        background: url('../assets/images/icon_s.png') no-repeat 0 0/ 100% 100%;
        margin-right: .0521rem;
    }
}



.list {
    padding: .1667rem 0 0 0;
    width: 7.2917rem;
    margin: auto;
    background-color: #f8f8f8;

    >.text {
        display: flex;
        margin-bottom: .1042rem;

        >li {

            font-size: .0677rem;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: #666666;
            line-height: .1563rem;
        }
    }

    >div {
        width: 7.2917rem;

        >.goods {
            display: flex;
            width: 7.2917rem;
            padding-bottom: 60px;
            flex-wrap: wrap;
            margin-bottom: .1354rem;
            justify-content: space-between;
            background-color: #fff;

            >li {
                width: 1.6771rem;
                //height: 2.9979rem;
                margin-bottom: 0.4042rem;
                cursor: pointer;

                >img {
                    width: 100%;
                    height: 100%;
                    height: 2.9rem;
                    object-fit: cover;
                }
            }


            >li:nth-of-type(1),
            li:nth-of-type(4),
            li:nth-of-type(5),
            li:nth-of-type(8) {
                // height: 3.2063rem;
            }


        }

    }
}</style>